<template>
  <base-breadcrumb>
    <searchData
      :search-data="searchArr"
      @search="search"
    />

    <a-card :bordered="false">
      <!-- <title-name title="维保期项目列表" /> -->

      <div class="pub-table-select-count">
        <a-icon
          type="info-circle"
          theme="twoTone"
        />
        <span style="margin-right: 12px">
          维保项目总数：<span class="totalNum">{{ totalDels.total || 0 }} 个</span> |
          维保期截止项目：<span class="totalNum">{{ totalDels.endNum || 0 }} 个</span> |
          维保期项目：<span class="totalNum">{{ totalDels.maintainNum || 0 }} 个</span>
        </span>
      </div>

      <list-table
        ref="table"
        size="default"
        :row-key="record => record.projectId"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="status"
          slot-scope="text"
        >
          <a-badge
            :status="text | statusTypeFilter"
            :text="text | statusFilter"
          />
        </span>
        <span
          slot="description"
          slot-scope="text"
        >
          <ellipsis
            :length="8"
            tooltip
          >{{ text }}</ellipsis>
        </span>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <MoreButton>
            <a
              v-btnPermission="[{code:'seex_pm_026_loo_01',ident:'prma_seex'},{code:'buco_pm_026_loo_01',ident:'prma_buco'}]"
              @click="handleDels(record)"
            >查看</a>

            <template v-if="record.statusCode == '0' "><a
                v-btnPermission="[{code:'seex_pm_026_aff_02',ident:'prma_seex'},{code:'buco_pm_026_aff_02',ident:'prma_buco'}]"
                @click="handleEdit(record)"
              >确认维保期</a></template>

            <template v-if="record.statusCode == '1' || record.statusCode == '2' "><a
                v-btnPermission="[{code:'seex_pm_026_rec_03',ident:'prma_seex'},{code:'buco_pm_026_rec_03',ident:'prma_buco'}]"
                @click="handleRecord(record)"
              >维保期记录</a></template>

            <template v-if="record.statusCode == '1'"><a
                v-btnPermission="[{code:'seex_pm_026_ext_04',ident:'prma_seex'},{code:'buco_pm_026_ext_04',ident:'prma_buco'}]"
                @click="handleApply(record)"
              >维保期延长申请</a></template>
            <template v-if="record.statusCode == '2'"><a
                v-btnPermission="[{code:'seex_pm_026_moi_05',ident:'prma_seex'},{code:'buco_pm_026_moi_05',ident:'prma_buco'}]"
                @click="handleApproveDetail(record)"
              >审批信息</a></template>
          </MoreButton>
        </template>
      </list-table>

      <a-modal
        v-model="visible"
        width="900px"
        :title="title"
      >
        <template slot="footer">
          <a-button
            key="back"
            @click="handleCancel"
          >
            取消
          </a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
          >
            确认
          </a-button>
        </template>
        <a-form :model="form">
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目名称"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.projectName"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目竣工日期"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.completionTime"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="地基基础工程和主题结构工程，为设计文件规定的该工程的合理使用年限（年）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="form.useYear"
                  :is-int="true"
                  :min="0"
                  placeholder="输入维保年限（年）"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="屋面防水要求的卫生间、房间和外墙面的防渗漏年限（年）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="form.leakageYear"
                  :is-int="true"
                  :min="0"
                  placeholder="5"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="供热与供冷系统，为2个采暖期、供冷期（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="form.coolingYear"
                  :is-int="true"
                  :min="0"
                  placeholder="24"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="电气管线、给排水管道、设备安装（年）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="form.installYear"
                  :is-int="true"
                  :min="0"
                  placeholder="2"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="装修工程（年）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="form.engineeringYear"
                  :is-int="true"
                  :min="0"
                  placeholder="2"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <a-modal
        v-model="visibles"
        width="900px"
        :title="titles"
      >
        <!-- <title-name title="维保期延长申请" /> -->
        <template slot="footer">
          <a-button
            key="back"
            @click="handleCancels"
          >
            取消
          </a-button>
          <a-button
            key="submit"
            :loading="loading"
            type="primary"
            @click="handleOks"
          >
            提交审批
          </a-button>
        </template>
        <a-form :model="forms">
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="所属单位"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.viewName"
                  disabled
                />
              </a-form-item>
            </a-col>
<!--            <a-col-->
<!--              :md="12"-->
<!--              :sm="12"-->
<!--            >-->
<!--              <a-form-item-->
<!--                label="项目名称"-->
<!--                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"-->
<!--                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"-->
<!--              >-->
<!--                <a-input-->
<!--                  v-model="dels.projectName"-->
<!--                  disabled-->
<!--                />-->
<!--              </a-form-item>-->
<!--            </a-col>-->
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目编号"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.projectNum"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目维保年限"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.maintainYear"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="当前维保期截止时间"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.endTime"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="创建人"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.createName"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="创建时间"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="dels.createTime"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="地基基础工程和主题结构工程，为设计文件规定的该工程的合理，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="forms.useMonth"
                  :is-int="true"
                  :min="0"
                  placeholder="输入延长时间（月）"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="屋面防水要求的卫生间、房间和外墙面的防渗漏年限，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="forms.leakageMonth"
                  :is-int="true"
                  :min="0"
                  placeholder="输入延长时间（月）"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="供热与供冷系统，为2个采暖期、供冷期，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="forms.coolingMonth"
                  :is-int="true"
                  :min="0"
                  placeholder="输入延长时间（月）"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="电气管线、给排水管道、设备安装，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="forms.installMonth"
                  :is-int="true"
                  :min="0"
                  placeholder="输入延长时间（月）"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="装修工程，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <BaseInputNumber
                  v-model="forms.engineeringMonth"
                  :is-int="true"
                  :min="0"
                  placeholder="输入延长时间（月）"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="维保期延长原因"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <BaseTextarea
                  v-model="forms.delayReason"
                  placeholder="请输入维保延长原因"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <title-name title="上传相关附件" />
          <u-table
            :list-url="listUrl"
            :upload-list="uploadList"
            :upload-arrys.sync="uploadFiles"
            :delete-url="deleteUrl"
            business-code="PM15"
            @fileArrysData="hanldeFileArrysData"
          />
        </a-form>
      </a-modal>

      <ApprovalDetails
        :title="'审批详情'"
        :business-id="businessId"
        :visible="visibleApprove"
        @cancel="visibleApprove = false"
        @confirm="visibleApprove = false"
      />
      <!-- 选择审批人 -->
      <selectApprover
        :business-id="businessId"
        :process-config="setProcessConfig"
        :is-close-upper="false"
        @click="visibles = false"
      />
      <!-- 选择审批人 -->
    </a-card>
  </base-breadcrumb>
</template>


<script>
import { STable, Ellipsis } from '@/components'
import { getMaintenanceList, getMaintenanceTotal, configMaintain, delayMaintainApply } from '@/api/project/maintain'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import OrgTreeSelect from '@/components/OrgTreeSelect'
import ARow from 'ant-design-vue/es/grid/Row'
import ApprovalDetails from '@/components/approvalDetails'
const searchArr = [
  // 搜索框
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '项目名称',
  //   value: 'projectName',
  //   type: 'input'
  // },
  {
    name: '状态',
    value: 'statusCode',
    type: 'select',
    data: [
      {
        value: '0',
        label: '确认维保期'
      },
      {
        value: '1',
        label: '维保期'
      },
      {
        value: '2',
        label: '维保期延长-审核中'
      },
      {
        value: '3',
        label: '维保期截止'
      }
    ]
  },
  // {
  //   name: '分公司',
  //   valueKey: 'branchId',
  //   type: SelectSubCompany
  // },
  {
    name: '项目编号',
    value: 'projectNum',
    type: 'input'
  }
]

const columns = [
  {
    title: '序号',
    width: 65,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '项目名称',
    width: 100,
    dataIndex: 'projectName'
  },
  {
    title: '项目编号',
    width: 100,
    dataIndex: 'projectNum'
  },
  {
    title: '分公司',
    width: 90,
    dataIndex: 'branch'
  },
  {
    title: '竣工日期',
    width: 100,
    dataIndex: 'completionTime'
  },
  {
    title: '维保期年限',
    width: 100,
    dataIndex: 'maintainYear'
  },
  {
    title: '维保期截止时间',
    width: 120,
    dataIndex: 'endTime'
  },
  {
    title: '状态',
    width: 60,
    dataIndex: 'statusName'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    STable,
    Ellipsis,
    ApprovalDetails
  },
  data() {
    return {
      uploadFiles: [],
      loading: false, // 确认维保期
      visibleApprove: false,

      columns,
      searchArr,
      dels: {
        viewName: ""
      },
      visible: false, // 确认维保期
      visibles: false, // 维保期延长申请

      listUrl: '',
      deleteUrl: '/cscec-project-business/file/business/project-fileDelete',
      uploadList: '/cscec-project-business/file/business/fileUpload',

      title: '', // 确认维保期标题
      titles: '', // 维保期延长申请标题

      queryParam: {},
      form: {
        useYear: '',
        leakageYear: 5,
        coolingYear: 24,
        installYear: 2,
        engineeringYear: 2
      },
      forms: {
        //维保期延长申请时间
        useMonth: '',
        leakageMonth: '',
        coolingMonth: '',
        installMonth: '',
        engineeringMonth: ''
      },

      data: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMaintenanceList(requestParameters).then((res) => {
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      totalDels: {},
      // 流程配置
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      // 业务id
      businessId: null
    }
  },

  async created() {
    this.getMaintenanceTotal()
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('project_maintenance_manage')
  },
  computed: {
    // rowSelection() {
    //   return {
    //     selectedRowKeys: this.selectedRowKeys,
    //     selectedRows: this.selectedRows,   // 当前行所有数据
    //     onChange: this.onSelectChange
    //   }
    // }
  },
  methods: {
    handleApproveDetail(record) {
      this.visibleApprove = true
      this.businessId = record.projectId + '_M_P_E_A'
    },
    hanldeFileArrysData(val) {
      this.forms.fileIdList = val
    },
    search(val) {
      this.queryParam = val
      this.$refs.table.refresh(true)
      this.getMaintenanceTotal()
    },

    // 维保期统计
    getMaintenanceTotal() {
      getMaintenanceTotal(this.queryParam).then((res) => {
        this.totalDels = res.data
      })
    },

    // 查看维保期详情
    handleDels(val) {
      this.$router.push({ path: '/maintain/details', query: { projectId: val.projectId, status: val.statusName } })
    },

    // 维保期记录
    handleRecord(val) {
      this.$router.push({ path: '/maintain/record/list', query: { obj: JSON.stringify(val) } })
    },

    handleEdit(record) {
      this.visible = true
      this.title = '确认维保期'
      this.dels = { ...record }
      this.form.useYear = ''
    },

    handleApply(record) {
      this.visibles = true
      this.titles = '维保期延长申请'
      this.businessId = record.projectId + '_M_P_E_A'
      this.forms = { ...record }
      this.dels = record
      this.dels.viewName = this.dels.branch + '/' + this.dels.projectName
      this.dels.createTime = this.getNowDate()
      this.dels.createName = JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
    },

    handleCancel() {
      this.visible = false
    },

    handleCancels() {
      this.visibles = false
      this.uploadFiles = []
      this.forms.fileIdList = []
    },

    handleOk() {
      if (this.loading) {
        return
      }
      this.loading = true
      this.form.projectId = this.dels.projectId
      configMaintain(this.form)
        .then((res) => {
          this.loading = false
          if (res.data.code == 200) {
            this.visible = false
            this.$message.success('确认维保期成功')
            this.$refs.table.refresh(true)
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    handleOks() {
      // 维保期延长申请
      if (this.$isEmpty(this.forms.useMonth) || this.$isEmpty(this.forms.leakageMonth) || this.$isEmpty(this.forms.coolingMonth) || this.$isEmpty(this.forms.installMonth) || this.$isEmpty(this.forms.engineeringMonth)) {
        this.$message.error('请先将延长时间填写完整！')
        return
      }

      if (this.loading) {
        return
      }
      this.loading = true
      this.setProcessConfig = null
      this.submitApprovalConfirm(this.processConfig, (flag)=>{
        if(!flag) {
          this.loading = false
          return
        }
        delayMaintainApply(this.forms)
                .then((res) => {
                  this.loading = false
                  if (res.data.code == 200) {
                    this.$message.success('维保期延长申请成功')
                    this.$refs.table.refresh(true)
                    this.setProcessConfig = this.processConfig
                    this.visibles = false
                  }
                })
                .catch(() => {
                  this.loading = false
                })
      })

    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }
}
</script>

<style>
.ant-row .ant-col .titleName.ant-form-item .ant-form-item-label {
  height: 28px;
  width: 540px;
  line-height: 22px;
  padding: 6px 4px 0 0;
  text-align: right;
  white-space: pre-wrap;
  overflow: visible;
}
.ant-row .ant-col .titleName.ant-form-item .ant-form-item-control-wrapper {
  width: calc(100% - 540px);
}
</style>
